{extend name="common/base"/}
<!-- 主体 -->
{block name="body"}

<div class="p-3">
    <form class="layui-form gg-form-bar border-t border-x">
        <div class="layui-input-inline" style="width:300px;margin-top: 10px">
            <input type="text" name="device_name" placeholder="请输入设备名称关键字" class="layui-input" autocomplete="off"/>
        </div>
        <div class="layui-input-inline" style="width:300px;margin-top: 10px">
            <input type="text" name="imei" placeholder="请输入IMEI" class="layui-input" autocomplete="off"/>
        </div>
        <div class="layui-input-inline" style="width:300px;margin-top: 10px">
            <input type="text" name="user_one" placeholder="请输入售酒端关键字" class="layui-input" autocomplete="off"/>
        </div>
        <div class="layui-input-inline" style="width:300px;margin-top: 10px">
            <input type="text" name="user_two" placeholder="请输入售酒机管理员关键字" class="layui-input" autocomplete="off"/>
        </div>
        <div class="layui-input-inline" style="width:300px;margin-top: 10px">
            <input type="text" name="user_three" placeholder="请输入补酒端关键字" class="layui-input" autocomplete="off"/>
        </div>
        <div class="layui-input-inline" style="width:300px;margin-top: 10px">
            <select name="status">
                <option value="">设备状态</option>
                <option value="run">运行中</option>
                <option value="error">故障</option>
                <option value="leisure">空闲</option>
            </select>
        </div>
        <button style="margin-top: 10px" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="searchform">提交搜索</button>
    </form>
    <table class="layui-hide" id="device" lay-filter="device"></table>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
<!--        <span class="layui-btn layui-btn-sm" lay-event="add" data-title="添加设备">+ 添加设备</span>-->
    </div>
</script>

<script type="text/html" id="barDemo">
    <div class="layui-btn-group">
		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="read">查看</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<!--        <a class="layui-btn layui-bg-1 layui-btn-xs" lay-event="bao">上报记录</a>-->
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></div>
</script>
<script type="text/html" id="image">
    <img src="{{d.image}}" width="30" height="30" lay-event="image"/>
</script>
<script type="text/html" id="imagesArr">
    {{# if(d.images != ''){ }}
    {{# layui.each(d.images, function(index, item){ }}
    <img src="{{item}}" width="30" height="30" lay-event="image"/>
    {{# }); }}
    {{# }else{}}
    暂无图片
    {{#}}}
</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool'];

    function gouguInit() {
        var table = layui.table, tool = layui.tool, form = layui.form;
        layui.pageTable = table.render({
            elem: '#device',
            title: '设备列表',
            toolbar: '#toolbarDemo',
            url: '/admin/device/datalist',
            page: true,
            limit: 20,
            // lineStyle: 'height:auto',
            cellMinWidth: 60,
            cols: [
                [
                {
                    // fixed: 'left',
                    field: 'id',
                    title: '编号',
                    align: 'center',
                    width: 80
                }, {
                    field: 'imei',
                    title: 'IMEI',
                    align: 'center',
                }, {
					field: 'weight',
					title: '剩余酒量(ml)',
					align: 'center',
				}, {
                    field: 'wine_num',
                    title: '售酒量(ml)',
                    align: 'center',
                }, {
                    field: 'device_name',
                    title: '设备名称',
                    align: 'center',
                }, {
                    field: 'user_one_title',
                    title: '售酒端',
                    align: 'center',
                }, {
                    field: 'user_two_title',
                    title: '售酒机管理员',
                    align: 'center',
                }, {
                    field: 'user_three_title',
                    title: '补酒员',
                    align: 'center',
                }, {
                    field: 'device_status',
                    title: '酒量状态',
                    align: 'center',
                    templet: function (d) {
                        var str = "";
                        if (d.device_status == 'normal') {
                            str = '<span>正常</span>';
                        } else if(d.device_status == 'low liquor') {
                            str = '<span style="color: red">酒量不足</span>';
                        } else {
                            str = '<span>--</span>';
                        }
                        return str;
                    },
                },{
                    field:'wx_code',
                    title: '设备二维码',
                    align: 'center',
                    width:100,
                    templet: function(d){
                        return '<img src="' + d.wx_code + '" class="layui-table-img" width="28" height="28" onclick="showBigImg(this)">';
                    }
                }, {
					field: 'status',
					title: '设备状态',
					align: 'center',
					templet: function (d) {
						var str = "";
						if (d.status == 'run') {
							str = '<span style="color: #5FB878">运行中</span>';
						} else if(d.status == 'error') {
							str = '<span style="color: red">故障</span>';
						} else if(d.status == 'leisure') {
							str = '<span>空闲</span>';
						} else {
							str = '<span>--</span>';
						}
						return str;
					},
				},
                    {
                        field: 'right',
                        title: '操作',
                        toolbar: '#barDemo',
                        width: 196,
                        align: 'center'
                    }
                ]
            ]
        });

        //监听表头工具栏事件
        table.on('toolbar(device)', function (obj) {
            if (obj.event === 'add') {
                tool.side("/admin/device/add");
                return false;
            }
        });

        //监听表格行工具事件
        table.on('tool(device)', function (obj) {
            var data = obj.data;
            if (obj.event === 'read') {
                tool.side('/admin/device/read?id=' + obj.data.id);
            } else if (obj.event === 'edit') {
                tool.side('/admin/device/edit?id=' + obj.data.id);
            } else if (obj.event === 'bao') {
                tool.side('/admin/device_log/datalist?id=' + obj.data.id);
            } else if (obj.event === 'del') {
                layer.confirm('确定要删除该记录吗?', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    let callback = function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) {
                            obj.del();
                        }
                    }
                    tool.delete("/admin/device/del", {id: data.id}, callback);
                    layer.close(index);
                });
            }
            if (obj.event === 'image') {
                var src = $(this).attr('src');
                // 在此处输入 layer 的任意代码
                layer.open({
                    type: 1, // page 层类型
                    area: ['500px', '500px'],
                    title: '',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: "<img src=" + src + " style='width: 100%;'>"
                });
            }
            return false;
        });

        //监听搜索提交
        form.on('submit(searchform)', function (data) {
            layui.pageTable.reload({
                where: {
                    device_name: data.field.device_name,
                    imei: data.field.imei,
                    msgid: data.field.msgid,
                    user_one: data.field.user_one,
                    user_two: data.field.user_two,
                    user_three: data.field.user_three,
                    status: data.field.status,
                },
                page: {
                    curr: 1
                }
            });
            return false;
        });
    }
    function showBigImg(imgObj) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: 'auto',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img src="' + $(imgObj).attr('src') + '" style="margin:0 auto;display:block;max-width:100%">'
        });
    }
</script>
{/block}
<!-- /脚本 -->